<template>
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="4" :labelWidth="'120'" :collapse="false" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!-- PDI申请单 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :selectionType="'single'"
      columnsRef="qtywwhpdiTable"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.choose = arr)"
    >
      <!--操作按钮-->
      <template slot="controls">
        <el-button type="primary" @click="addFun()">新增</el-button>
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button type="primary" @click="cancelSubmit()">取消提交</el-button>
      </template>
    </FilterTable>

    <!--详情页面-->
    <Drawer :visible.sync="visible" :title="(type == 'add' ? '新增' : type == 'edit' ? '编辑' : '查看') + 'PDI申请单'" :width="1100" :destroyOnClose="true">
      <detail :id="id" :type="type" @return="fatherReturn" />
    </Drawer>
  </div>
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
import dictCode from '@/utils/dictCode';
import { jsonToHump } from '@/utils/index';
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getPDIApplicationList, deletePDIById, submitPDI, cancelSubmitPDI } from '@/api/repair/otherBusiness/maintainPDI/index';
import { getSeries, getModel } from '@/api/customerRepair/customerCare/insuranceDueRemind/index';
import detail from './detail.vue';

export default {
  name: 'maintainPDI',
  components: {
    detail
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(), // 搜索列
      fetchApi: getPDIApplicationList, // 获取PDI申请单列表接口
      fetchParams: { xhrAbort: false }, // 参数
      columns: this.createTableColumns(), // 表格列
      visible: false, // 抽屉是否显示
      id: '', // 选中数据id
      type: '' // 编辑类型：add,read,edit
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.querySeries();
    this.queryModel();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '申请单号',
          fieldName: 'applicationNo'
        },
        {
          type: 'RANGE_DATE',
          label: '检查日期',
          valueFormat: 'yyyy-MM-dd',
          fieldName: 'checkDateFrom|checkDateTo'
        },
        {
          type: 'INPUT',
          label: 'VIN码',
          fieldName: 'vin'
        },
        {
          type: 'SELECT',
          label: '单据状态',
          fieldName: 'status',
          itemList: this.createDictList('6701')
        },
        {
          type: 'SELECT',
          label: '服务车系',
          fieldName: 'vehicleSeriesCode',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车型大类',
          fieldName: 'vehicleTypeCode',
          itemList: []
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 150,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.readFun(props.row.id)}>
                  查看
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.editFun(props.row.id)} disabled={!(props.row.status == '67011001')}>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.deleteFun(props.row.id)} disabled={!(props.row.status == '67011001')}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '申请单号',
          dataIndex: 'applicationNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '检查费用',
          dataIndex: 'checkFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN码',
          dataIndex: 'vin',
          width: 170,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车辆型号名称',
          dataIndex: 'vehicleTypeName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务车系名称',
          dataIndex: 'vehicleSeriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '品牌名称',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'engineNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'liceseNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '生产日期',
          dataIndex: 'productDate',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '销售日期',
          dataIndex: 'saleDate',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '行驶里程',
          dataIndex: 'mileage',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户地址',
          dataIndex: 'customerAddress',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '固定电话',
          dataIndex: 'phone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '移动电话',
          dataIndex: 'mobilePhone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '邮编',
          dataIndex: 'postCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务站备注',
          dataIndex: 'dealerRemark',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作日期',
          dataIndex: 'operateDate',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '检查日期',
          dataIndex: 'checkDate',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '提交日期',
          dataIndex: 'commitDate',
          sorter: true,
          filter: true,
          width: 150,
          filterType: 'input'
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商名称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单据状态',
          dataIndex: 'status',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.status, '6701')}</div>;
          }
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 提交
    submit() {
      if (typeof this.choose[0] != 'undefined') {
        if (this.choose[0]['status'] === '67011002') {
          this.$notify({
            title: '提示信息',
            message: '该数据已处于提交状态！',
            type: 'warning'
          });
        } else {
          submitPDI(this.choose[0].id).then(res => {
            if (res.resultCode == 200) {
              this.fetchParams = Object.assign({}, this.fetchParams);
              this.$notify({
                title: '提示信息',
                message: '提交成功！',
                type: 'success'
              });
            }
          });
        }
      } else {
        this.$notify({
          title: '提示信息',
          message: '请选择需要提交的信息！',
          type: 'warning'
        });
      }
    },
    // 取消提交
    cancelSubmit() {
      if (typeof this.choose[0] != 'undefined') {
        if (this.choose[0]['status'] != '67011002') {
          this.$notify({
            title: '提示信息',
            message: '该数据未处于提交状态！',
            type: 'warning'
          });
        } else {
          cancelSubmitPDI(this.choose[0].id).then(res => {
            if (res.resultCode == 200) {
              this.fetchParams = Object.assign({}, this.fetchParams);
              this.$notify({
                title: '提示信息',
                message: '提交成功！',
                type: 'success'
              });
            }
          });
        }
      } else {
        this.$notify({
          title: '提示信息',
          message: '请选择需要取消提交的信息！',
          type: 'warning'
        });
      }
    },
    // 新增
    addFun() {
      this.id = '';
      this.type = 'add';
      this.visible = true;
    },
    // 查看
    readFun(id) {
      this.type = 'read';
      this.id = id;
      this.visible = true;
    },
    // 编辑
    editFun(id) {
      this.type = 'edit';
      this.id = id;
      this.visible = true;
    },
    // 删除
    deleteFun(id) {
      console.log(id);
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletePDIById(id).then(res => {
            if (res.errMsg) {
              this.$notify({
                title: '错误信息',
                message: '删除失败',
                type: 'error'
              });
            } else {
              this.$notify({
                title: '提示信息',
                type: 'success',
                message: '删除成功!'
              });
              // 重新加载
              this.fetchParams = { ...this.fetchParams };
            }
          });
        })
        .catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 返回方法
    fatherReturn(type) {
      this.visible = false;
      if (type == 'refresh') {
        this.fetchParams = { ...this.fetchParams };
      }
    },
    // 查询所有车系
    async querySeries() {
      const res = await getSeries();
      this.topFilterList.find(x => x.fieldName === 'vehicleSeriesCode').itemList = res.data.map(x => ({ text: x.SERIES_NAME, value: x.SERIES_ID + '' }));
    },
    // 查询所有车型
    async queryModel() {
      const res = await getModel();
      this.topFilterList.find(x => x.fieldName === 'vehicleTypeCode').itemList = res.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));
    }
  }
};
</script>
